<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 50px;
        }
        ul{
            width: 400px;
            height: 30px;
            border: 1px solid #ccc;
            border-bottom: none;
           
        }
        li{
            list-style: none;
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            /* border: 1px solid #ccc; */
           
        }
        li:hover{
            color: #0AA770;
        }
        li.active{
            color: #0AA770;
            border-top: 2px solid #0AA770;
        }
        .main{
            clear: both;
        }
        #box .main .content{
            width: 400px;
            height: 600px;
            border: 1px solid #ccc;
            border-top: none;
            display: none;
        }
    </style>
</head>
<body>
    
</body>
    <div id="box">
        <ul>
            <li class="active">实事</li>
            <li>科技</li>
            <li>娱乐</li>
            <li>体育</li>
        </ul>
        <div class="main">
            <div class="content" style="display: block;">实事内容</div>
            <div class="content">科技内容</div>
            <div class="content">娱乐内容</div>
            <div class="content">体育内容</div>
        </div>
    </div>
    <script>
        /*
            选项卡的制作：
                * 点击某个选项，就切换到对于的选项内容
                * 新的名词： className 设置类名。 getELmentsByClassName():通过类名查找元素，找到是集合； getElementsByTagName()：通过标签名查找元素，找到集合
        */

        //1.找到相关元素
        var box = document.getElementById('box');
        var btns = box.getElementsByTagName('li');//集合
        var contents = box.getElementsByClassName('content');
        // console.log(btns.length,contents.length);//打印长度 4

        // 元素名.onclick = function() {}
        // btns[0].onclick = function() {
        //     console.log(111);
        // }

        // btns[1].onclick = function() {
        //     console.log(222);
        // }

        // btns[2].onclick = function() {
        //     console.log(333);
        // }

        // btns[3].onclick = function() {
        //     console.log(444);
        // }

        //2.给按钮们绑定点击事件
        for(var i = 0; i < btns.length; i++) {//0 1 2 3
            // console.log(i);
            btns[i].index = i;//绑定索引值  btns[0].index=0;btns[1].index=1;btns[2].index=2
            btns[i].onclick = function() {
                // btns[2].className = 'active';
                //this:当前点击的对象
                console.log(this.index);
                for(var j = 0; j < btns.length; j++) {
                    btns[j].className = '';//清除所有按钮样式
                    contents[j].style.display = 'none';//隐藏所有内容盒子
                }
                btns[this.index].className = 'active';//当前那个按钮高亮
                contents[this.index].style.display = 'block';//当前对于的内容盒子显示
            }
        }
    </script>
</html>